<template>
  <ul class="list-group m-4">
    <li v-for="item in doneList" :key="item.id" class="list-group-item d-flex align-item-center justify-content-between">
      <div>
        <label for="item.id">{{ item.text }}</label>
      </div>
      <div class="btnBox"> <button class="btn btn-danger btn-sm" @click.stop="clearDone(item.id)">清除</button> </div>
    </li>
  </ul>
  <small v-if="doneList.length === 0" class="form-text text-muted">暂无数据</small>
  <button  v-else class="btn btn-primary float-end btn-sm mt-2 me-4" @click="clearAllDone">清除所有</button>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import store from '@/store'
import { TodoItemState } from '@/common/const'
export default defineComponent({
  name: 'finsh-list',
  setup () {
    const clearAllDone = () => {
      store.commit('clearAll', TodoItemState.DONE)
    }

    const clearDone = (id:string) => {
      store.commit('clear', id)
    }

    return {
      clearDone,
      doneList: computed(() => store.getters.getDones),
      clearAllDone
    }
  }
})
</script>
